<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html xmlns>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>二手交易首页</title>
    <link href="${path}/css/trading/homepage/global.css" rel="stylesheet" type="text/css" />
    <link href="${path}/css/trading/homepage/layout.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="${path}/js/trading/homepage/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="${path}/js/trading/homepage/index.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src=" https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.js"></script>
    <link rel="stylesheet" href="${path}/plugins/layui-v2.5.5/layui/css/layui.css"  media="all">
    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="${path}/plugins/bootstrap/css/bootstrap.css" type="text/css">

    <!-- 总导航的样式begin -->
    <style>
        /* 搜索框中样式 */
        .form-control-feedback {
            color: #484848;
            line-height: 46px;
        }

        .row img {
            width: 25px;
            height: 25px;
        }

        /* 导航宽度 */
        .navbar {
            max-height: 80px;
        }

        .navbar-nav>li>a {
            padding-top: 18px;
            height: 60px;
            /* font-size: 18px; */
            /* color:white; */
            color: #484848;
        }

        .navbar-brand {
            padding-top: 8px;
            /* font-size: 18px; */
            height: 60px;
        }

        .navbar-default .navbar-nav>li>a {
            color: #484848;
        }

        .navbar-default .navbar-nav>li>a:hover {
            color: #000;
        }


        /* 下划线动画 */
        .navbar-right li {
            display: inline-block;
            padding: 0 0.8em;
        }

        .navbar-right a {
            position: relative;
            text-decoration: none;
            color: #484848;
            display: block;
            padding: 1.2em 0.8em;
        }

        .nav-underline:before {
            content: "";
            position: absolute;
            bottom: 0;
            width: 0;
            border-bottom: 2px solid #484848;
        }

        .nav-underline:hover:before {
            width: 80%;
        }

        .nav-underline:before {
            -webkit-transition: width 0.5s ease-in-out;
            -moz-transition: width 0.5s ease-in-out;
            -ms-transition: width 0.5s ease-in-out;
            -o-transition: width 0.5s ease-in-out;
            transition: width 0.5s ease-in-out;
        }

        .mynav-underline-active,
        .mynav-underline-active:hover {
            border-bottom: 2px solid #484848;
            text-align: center;
        }

        .navbar-right a {
            /* font-family:'Times New Roman', Times, serif; */
            /* font-weight: bold; */
            font-family: 宋体, sans-serif;
            letter-spacing: 1pt;
            /*字间距离*/
            /* border-bottom : 1px solid #4e5358; 下框线 */
            line-height: 20px;

        }
    </style>
    <!-- 总导航样式end -->
    <!-- 内容样式 -->
    <style type="text/css">
        /*body {*/
            /*background-size: 100%, 100%;*/
            /*background: url(http://pz9i3bxwr.bkt.clouddn.com//back.png) no-repeat fixed;*/
            /*opacity: 0.8;*/
        /*}*/
        #petTab img {
            width: 100px;
            height: 120px;
            position: relative;
            left: 10px;
        }

        .pet_sort img {
            width: 100px;
            height: 120px;
        }

        #pet_history>div {
            float: left;
            width: 30%;
            height: 40%;
            padding-left: 55px;
        }

        #pet_history>div>div {
            float: left;
            width: 50%;
            height: 40%;
            position: relative;
            left: 30px;
        }

        #pet_family>div {
            float: left;
            width: 30%;
            height: 40%;
            padding-left: 55px;
        }

        #pet_family>div>div {
            float: left;
            width: 50%;
            height: 40%;
            position: relative;
            left: 30px;
        }

        #pet_culture>div {
            float: left;
            width: 30%;
            height: 40%;
            padding-left: 55px;
        }

        #pet_culture>div>div {
            float: left;
            width: 50%;
            height: 40%;
            position: relative;
            left: 30px;
        }

        #pet_novel>div {
            float: left;
            width: 30%;
            height: 40%;
            padding-left: 55px;
        }

        #pet_novel>div>div {
            float: left;
            width: 50%;
            height: 40%;
            position: relative;
            left: 30px;
        }

        #pet_focus>div {
            float: left;
            width: 30%;
            height: 40%;
            padding-left: 55px;
        }

        #pet_focus>div>div {
            float: left;
            width: 50%;
            height: 40%;
            position: relative;
            left: 30px;
        }

        #scroll_img img {
            width: 953px;
            height: 300px;
        }
    </style>
    <!-- 分页样式 -->
    <style>
        /*.pagination-outer {*/
            /*text-align: center;*/
        /*}*/

        /*.pagination {*/
            /*font-family: 'Allerta Stencil', sans-serif;*/
            /*display: inline-flex;*/
            /*position: relative;*/
        /*}*/

        /*.pagination li a.page-link {*/
            /*color: #fff;*/
            /*background: transparent;*/
            /*font-size: 21px;*/
            /*line-height: 35px;*/
            /*height: 38px;*/
            /*width: 38px;*/
            /*padding: 0;*/
            /*margin: 0 8px;*/
            /*border: none;*/
            /*position: relative;*/
            /*z-index: 1;*/
            /*transition: all 0.4s ease 0s;*/
        /*}*/

        /*.pagination li.active a.page-link,*/
        /*.pagination li a.page-link:hover,*/
        /*.pagination li.active a.page-link:hover {*/
            /*color: #fff;*/
            /*background-color: transparent;*/
        /*}*/

        /*.pagination li a.page-link:before,*/
        /*.pagination li a.page-link:after {*/
            /*content: '';*/
            /*background: linear-gradient(225deg, #FBBF64, #ff5858);*/
            /*height: 100%;*/
            /*width: 100%;*/
            /*border: 3px solid #fff;*/
            /*box-shadow: 0 0 3px #000;*/
            /*border-radius: 50%;*/
            /*opacity: 1;*/
            /*transform: translateX(-50%) translateY(-50%) rotate(-45deg);*/
            /*position: absolute;*/
            /*top: 50%;*/
            /*left: 50%;*/
            /*z-index: -1;*/
            /*transition: all 0.3s ease-in;*/
        /*}*/

        /*.pagination li a.page-link:hover:before,*/
        /*.pagination li.active a.page-link:before {*/
            /*border-radius: 50% 0 50% 50%;*/
        /*}*/

        /*.pagination li a.page-link:after {*/
            /*background: #fff;*/
            /*height: 5px;*/
            /*width: 5px;*/
            /*border: none;*/
            /*box-shadow: 0 0 0 transparent;*/
            /*opacity: 0;*/
            /*transform: translateX(-50%) translateY(0) rotate(0);*/
            /*top: auto;*/
            /*bottom: 0;*/
        /*}*/

        /*.pagination li a.page-link:hover:after,*/
        /*.pagination li.active a.page-link:after {*/
            /*opacity: 1;*/
            /*bottom: 85%;*/
        /*}*/

        /*.pagination li:first-child a.page-link:before {*/
            /*transform: translateX(-50%) translateY(-50%) rotate(-135deg);*/
        /*}*/

        /*.pagination li:first-child a.page-link:hover:before {*/
            /*border-radius: 50% 0 50% 50%;*/
        /*}*/

        /*.pagination li:first-child a.page-link:after {*/
            /*transform: translateX(0) translateY(-50%);*/
            /*top: 50%;*/
            /*bottom: auto;*/
            /*left: auto;*/
            /*right: 0;*/
        /*}*/

        /*.pagination li:first-child a.page-link:hover:after {*/
            /*right: 80%;*/
        /*}*/

        /*.pagination li:last-child a.page-link:before {*/
            /*transform: translateX(-50%) translateY(-50%) rotate(45deg);*/
        /*}*/

        /*.pagination li:last-child a.page-link:hover:before {*/
            /*border-radius: 50% 0 50% 50%;*/
        /*}*/

        /*.pagination li:last-child a.page-link:after {*/
            /*transform: translateX(0) translateY(-50%);*/
            /*bottom: auto;*/
            /*top: 50%;*/
            /*left: 0;*/
        /*}*/

        /*.pagination li:last-child a.page-link:hover:after {*/
            /*left: 80%;*/
        /*}*/

        /*@media only screen and (max-width: 480px) {*/
            /*.pagination {*/
                /*display: block;*/
            /*}*/

            /*.pagination li {*/
                /*margin-bottom: 10px;*/
                /*display: inline-block;*/
            /*}*/
        /*}*/
    </style>
<!-- 返回顶部 -->
<style>

        /* 小火箭css */
        #gotop1 {
            width: 80px;
            position: fixed;
            bottom: 90px;
            cursor: pointer;
            z-index: 99998;
            right: 50%;
            margin-right: -620px;
        }
        
        /* 小火箭悬停特效 */
        
        #gotop1:hover {
            animation: rubberBand 1s;
        }
        
        @keyframes rubberBand {
          from {
            transform: scale3d(1, 1, 1);
          }
        
          30% {
            transform: scale3d(1.25, 0.75, 1);
          }
        
          40% {
            transform: scale3d(0.75, 1.25, 1);
          }
        
          50% {
            transform: scale3d(1.15, 0.85, 1);
          }
        
          65% {
            transform: scale3d(.95, 1.05, 1);
          }
        
          75% {
            transform: scale3d(1.05, .95, 1);
          }
        
          to {
            transform: scale3d(1, 1, 1);
          }
        }
        
        /* end 小火箭 */
</style>
        
</head>

<body>
    <%@include file="../sharedper/nav.jsp"%>
    <!-- 总导航end -->
  <%--<img src="http://pz9i3bxwr.bkt.clouddn.com//资源 4_看图王.png" style="opacity: 0.5;">--%>
    <!--网站中间内容开始-->
    <div id="main">
        <!-- <div class="dd_index_top_adver"><img src="images/dd_index_top_adver.jpg" alt="通栏广告图片" /></div> -->
        <!--中间部分开始-->
        <div id="content" style="width: 100%;padding-top: 70px">
            <!--轮换显示的横幅广告图片-->
            <!-- <div class="scroll_top"></div> -->
            <div class="scroll_mid" style="width: 100%;height: 420px;">
                <ul id="scroll_img" style="width: 100%;height: 100%">
                    <li style="height: 420px;"><img src="http://pz9i3bxwr.bkt.clouddn.com//x4.jpg" style="height: 420px;"/></li>
                    <li style="height: 420px;"><img src="http://pz9i3bxwr.bkt.clouddn.com//x6.jpg" style="height: 420px;"/></li>
                    <li style="height: 420px;"><img src="http://pz9i3bxwr.bkt.clouddn.com//zzpic17813.jpg" style="height: 420px;"/></li>
                    <li style="height: 420px;"><img src="http://pz9i3bxwr.bkt.clouddn.com//x5.jpg" style="height: 420px;"/></li>
                    <li style="height: 420px;"><img src="http://pz9i3bxwr.bkt.clouddn.com//zzpic19259.jpg" style="height: 420px;"/></li>
                    <li style="height: 420px;"><img src="http://pz9i3bxwr.bkt.clouddn.com//zzpic15223.gif" style="height: 420px;"/></li>
                </ul>
                <ul id="scroll_number">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                </ul>
            </div>
            <div >
                    <img src="http://pz9i3bxwr.bkt.clouddn.com//11.png" style="width: 60px;height:60px;position:relative;right:-50px;top:20px;opacity: 0.5;"/>
                    <img src="http://pz9i3bxwr.bkt.clouddn.com//11.png" style="width: 60px;height:60px;position:relative;right:-150px;top:0px;opacity: 0.5;"/>
                    <img src="http://pz9i3bxwr.bkt.clouddn.com//11.png" style="width: 60px;height:60px;position:relative;right:-250px;top:20px;opacity: 0.5;"/>
                    <img src="http://pz9i3bxwr.bkt.clouddn.com//11.png" style="width: 60px;height:60px;position:relative;right:-350px;top:0px;opacity: 0.5;"/>
                    <img src="http://pz9i3bxwr.bkt.clouddn.com//11.png" style="width: 60px;height:60px;position:relative;right:-450px;top:20px;opacity: 0.5;"/>
                    <img src="http://pz9i3bxwr.bkt.clouddn.com//11.png" style="width: 60px;height:60px;position:relative;right:-550px;top:0px;opacity: 0.5;"/>
                </div>
            <!-- <div class="scroll_end"></div> -->
            <!--最新上架开始-->
            <div id="petTab" class="pet_sort" style="height:500px;position: relative;top: 20px;">
                <div class="pet_new">
                    <div class="pet_left">
                        <h3 style="margin: 0px 0px 0px;color: #F99B46;font-weight:bold">最新上架</h3>
                    </div>
                    <div class="pet_type pet_type_out" id="history" style="margin-top: 20px;color: #F99B46;font-weight:bold">食物</div>
                    <div class="pet_type" id="family" style="margin-top: 20px;color: #F99B46;font-weight:bold">玩具</div>
                    <div class="pet_type" id="culture" style="margin-top: 20px;color: #F99B46;font-weight:bold">服饰</div>
                    <div class="pet_type" id="novel" style="margin-top: 20px;color: #F99B46;font-weight:bold">其他</div>
                </div>
                <div class="col-md-3" style="margin-left: 20px;height: 30px;padding-top: -10px">
                    <div class="input-group" style="width: 500px">
                        <%--<input type="text" class="form-control" id="searchName" value="${name}" style="margin-left: 20px;width:250px;height: 30px">--%>
                        <%--<!-- &lt;%&ndash;name为了回显数据&ndash;%&gt; -->--%>
                        <%--<span class="input-group-btn">--%>
                        <%--<!-- &lt;%&ndash;查询&ndash;%&gt; -->--%>
                                <%--<button class="btn btn-default" type="button" onclick="selectAll()" style="margin-left: -40px;height: 30px;;margin-top: -5px">--%>
                                    <%--查询</button>--%>
                            <%--</span>--%>
                        <%--管理员才看的见--%>
                        <c:if test="${sessionScope.user.powers==1}">
                        <button type='button' class='btn btn-primary btn-lg' data-toggle='modal' data-target='#myModal' style='margin-left: 10px;width: 54px;height: 30px;padding: 0px;font-size: 15px;margin-top: -23px'>
                            添加</button>
                        <!-- <%--//触发添加模态框--%> -->
                        <div class='modal fade' id='myModal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
                            <div class='modal-dialog'>
                                <div class='modal-content'>

                                    <div class='container-flude' style='margin-top: 30px;'>
                                        <div class='row'>
                                            <form action='${path}/goods/add' method='POST' class='form-horizontal' role='form'  enctype="multipart/form-data">
                                                <div class='form-group'>
                                                    <label class='col-md-4 control-label'>&nbsp;&nbsp;&nbsp;用户ID:</label>
                                                    <div class='col-md-6'>
                                                        <input type='text' class='form-control' name='userId' placeholder='请输入用户ID'>
                                                    </div>
                                                </div>
                                                <div class='form-group'>
                                                    <label class='col-md-4 control-label'>&nbsp;&nbsp;&nbsp;商品名:</label>
                                                    <div class='col-md-6'>
                                                        <input type='text' class='form-control' name='goodsName' placeholder='请输入商品名:例:"优质狗粮"'>
                                                    </div>
                                                </div>
                                                <div class='form-group'>
                                                    <label class='col-md-4 control-label'>&nbsp;&nbsp;&nbsp;选择商品类型:
                                                    </label>
                                                <div class='col-md-6'>
                                                    <!-- <%--//this指的是选中的select对象--%> -->
                                                    <select class='form-control' name='goodsTypeId'>
                                                        <option value='-1'>===请您选择商品类型===</option>
                                                        <!-- <%--//商品类型--%> -->
                                                        <c:forEach items="${requestScope.goodsTypeList}" var="t">
                                                            <c:choose>
                                                                <c:when test="${tid==t.id}">
                                                                    <!-- <%--tid用来数据的回显--%> -->
                                                                    <option value="${t.id}" selected>${t.typeName}</option>
                                                                </c:when>
                                                                <c:otherwise>
                                                                    <option value="${t.id}">${t.typeName}</option>
                                                                </c:otherwise>
                                                            </c:choose>
                                                        </c:forEach>
                                                    </select>
                                                </div>
                                                </div>
                                                <div class='form-group'>
                                                    <label class='col-md-4 control-label'>&nbsp;&nbsp;&nbsp;商品新旧程度:</label>
                                                    <div class='col-md-6'>
                                                        <input type='text' class='form-control' name='degree' placeholder='请输入商品新旧程度:例:"九成新"'>
                                                    </div>
                                                </div>
                                                <div class='form-group'>
                                                    <label class='col-md-4 control-label'>&nbsp;&nbsp;&nbsp;商品价格:</label>
                                                    <div class='col-md-6'>
                                                        <input type='text' class='form-control' name='price' placeholder='请输入商品价格:'>
                                                    </div>
                                                </div>
                                                <div class='form-group'>
                                                    <label class='col-md-4 control-label'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;商品简介：</label>
                                                    <div class='col-md-6'>

                                                        <textarea class='form-control' rows='3' name='goodsDetails'></textarea>
                                                    </div>
                                                </div>
                                                <div class='form-group'>
                                                    <label class='col-md-4 control-label'>&nbsp;&nbsp;&nbsp;图片路径:</label>
                                                    <div class='col-md-6'>
                                                        <input type="file" name="goodsPicture">
                                                    </div>
                                                </div>
                                                <div class='form-group'>
                                                    <label class='col-md-4 control-label'>&nbsp;&nbsp;&nbsp;所在地:</label>
                                                    <div class='col-md-4'style="margin-left: 15px">
                                                        <div data-toggle="distpicker">
                                                            <div class="form-group">
                                                                <label class="sr-only" for="province">Province</label>
                                                                <select class="form-control" name="province" id="province"></select>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="sr-only" for="city">City</label>
                                                                <select class="form-control" name="city" id="city"></select>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="sr-only" for="district">District</label>
                                                                <select class="form-control" name="district" id="district"></select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class='form-group' style="margin-left: 100px">
                                                    <div class='col-md-offset-2 col-md-5'style='padding-left:100px'>
                                                        <button type='submit' class='btn btn-default'>确认添加</button>
                                                    </div>
                                                </div>
                                                <br><br><br><br>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button type='button' class='btn btn-danger' onclick='delAny()' style='margin-left: 10px;width: 54px;height: 30px;padding: 0px;font-size: 15px;margin-top: -23px'>
                            删除</button>
                        </c:if>
                        
                    </div>
                </div>

                <div class="pet_class" style="height:250px;padding-top: 30px">

                    <!--食物-->
                    <%--异步分页区域--%>
                    <dl id="pet_history">
                        <%--<%  Integer goodsTypeId=1;--%>
                            <%--pageContext.setAttribute("goodsTypeId",goodsTypeId);%>--%>
                        <%--<c:forEach items="${requestScope.pageInfo.list}" var="g">--%>
                            <%--<c:if test="${g.goodsTypeId==1&&g.status==0}">--%>
                        <%--<div style="height: 163.2px">--%>
                            <%--&lt;%&ndash;管理员才看的见&ndash;%&gt;--%>
                            <%--<c:if test="${sessionScope.user.powers==1}">--%>
                            <%--<input type='checkbox' value='${g.id}' name='cks' style='float:left'>--%>
                            <%--</c:if>--%>
                            <%--<img src="${g.goodsPicture}" alt="history" style="float:left" />--%>
                            <%--<div style="float:left">--%>
                                <%--<a href="${path}/goodsDetails/list?id=${g.id}">--%>
                                    <%--<h5 style="font-weight:bold">${g.goodsName}</h5>--%>
                                    <%--<div>--%>
                                        <%--<p style="font-weight:bold">${g.goodsDetails}</p>--%>
                                    <%--</div>--%>
                                <%--</a>--%>
                                <%--<p style='float:left;margin-left: -143px'>--%>
                            <%--&lt;%&ndash;管理员才看的见&ndash;%&gt;--%>
                            <%--<c:if test="${sessionScope.user.powers==1}">--%>
                                    <%--<a href='javascript:' func='btnDescription${g.id}' style="color: red">--%>
                                        <%--<span class='glyphicon glyphicon-edit'></span></a>--%>
                                <%--</c:if>--%>
                                <%--<div class='modal fade' id='myModal2${g.id}' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>--%>
                                    <%--<div class='modal-dialog'>--%>
                                        <%--<div class='modal-content'>--%>
                                            <%--<div class='container-flude' style='margin-top: 30px;'>--%>
                                                <%--<div class='row'>--%>
                                                    <%--<form action='${path}/goods/update?id=${g.id}' method='POST' class='form-horizontal' role='form'--%>
                                                          <%--enctype="multipart/form-data" id="update">--%>

                                                        <%--<div class='form-group'>--%>
                                                            <%--<label class='col-md-4 control-label' style='padding-left:100px'>--%>
                                                                <%--&nbsp;&nbsp;&nbsp;用户ID:</label>--%>
                                                            <%--<div class='col-md-6' style="margin-top: 8px">--%>
                                                                <%--<span style="font-weight: bolder">${g.userId}</span>--%>
                                                            <%--</div>--%>
                                                        <%--</div>--%>
                                                        <%--<div class='form-group'>--%>
                                                            <%--<label class='col-md-4 control-label'>&nbsp;&nbsp;&nbsp;商品名:</label>--%>
                                                            <%--<div class='col-md-6'>--%>
                                                                <%--<input type='text' class='form-control' name='goodsName'--%>
                                                                       <%--value="${g.goodsName}" placeholder='请输入商品名:例:"优质狗粮"'>--%>
                                                            <%--</div>--%>
                                                        <%--</div>--%>
                                                        <%--<div class='form-group'>--%>
                                                            <%--<label class='col-md-4 control-label'>&nbsp;&nbsp;&nbsp;选择商品类型:--%>
                                                            <%--</label>--%>
                                                            <%--<div class='col-md-6'>--%>
                                                                <%--<!-- &lt;%&ndash;//this指的是选中的select对象&ndash;%&gt; -->--%>
                                                                <%--<select class='form-control' name='goodsTypeId'>--%>
                                                                        <%--<option value="${g.goodsTypeId}">${goodsTypeList[g.goodsTypeId-1].typeName}</option>--%>
                                                                    <%--<!-- &lt;%&ndash;//商品类型&ndash;%&gt; -->--%>
                                                                    <%--<c:forEach items="${requestScope.goodsTypeList}" var="t">--%>
                                                                        <%--<c:if test="${g.goodsTypeId!=t.id}">--%>
                                                                                <%--<option value="${t.id}">${t.typeName}</option>--%>
                                                                        <%--</c:if>--%>
                                                                    <%--</c:forEach>--%>
                                                                <%--</select>--%>
                                                            <%--</div>--%>
                                                        <%--</div>--%>
                                                        <%--<div class='form-group'>--%>
                                                            <%--<label class='col-md-4 control-label'>&nbsp;&nbsp;&nbsp;商品新旧程度:</label>--%>
                                                            <%--<div class='col-md-6'>--%>
                                                                <%--<input type='text' class='form-control' name='degree'--%>
                                                                       <%--value="${g.degree}" placeholder='请输入商品新旧程度:例:"九成新"'>--%>
                                                            <%--</div>--%>
                                                        <%--</div>--%>
                                                        <%--<div class='form-group'>--%>
                                                            <%--<label class='col-md-4 control-label'>&nbsp;&nbsp;&nbsp;商品价格:</label>--%>
                                                            <%--<div class='col-md-6'>--%>
                                                                <%--<input type='text' class='form-control' name='price'--%>
                                                                       <%--value="${g.price}" placeholder='请输入商品价格:'>--%>
                                                            <%--</div>--%>
                                                        <%--</div>--%>
                                                        <%--<div class='form-group'>--%>
                                                            <%--<label class='col-md-4 control-label'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;商品简介：</label>--%>
                                                            <%--<div class='col-md-6'>--%>

                                                                <%--<textarea class='form-control' rows='3'--%>
                                                                          <%--name='goodsDetails'>${g.goodsDetails}</textarea>--%>
                                                            <%--</div>--%>
                                                        <%--</div>--%>
                                                        <%--<div class='form-group'>--%>
                                                            <%--<label class='col-md-4 control-label'>&nbsp;&nbsp;&nbsp;图片路径:</label>--%>
                                                            <%--<div class='col-md-6'>--%>
                                                                <%--&lt;%&ndash;<input type='text' class='form-control'&ndash;%&gt;--%>
                                                                       <%--&lt;%&ndash;value="${g.goodsPicture}" name='goodsPicture' placeholder='请输入图片路径:'>&ndash;%&gt;--%>
                                                                <%--<input type="file" name="goodsPicture" id="myfile" >--%>
                                                            <%--</div>--%>
                                                        <%--</div>--%>
                                                        <%--<div class='form-group'>--%>
                                                            <%--<label class='col-md-4 control-label'>&nbsp;&nbsp;&nbsp;所在地:</label>--%>
                                                            <%--<div class='col-md-4'style="margin-left: 15px">--%>
                                                                    <%--<div data-toggle="distpicker">--%>
                                                                        <%--<div class="form-group">--%>
                                                                            <%--<label class="sr-only" for="province1">Province</label>--%>
                                                                            <%--<select class="form-control" name="province" id="province1"></select>--%>
                                                                        <%--</div>--%>
                                                                        <%--<div class="form-group">--%>
                                                                            <%--<label class="sr-only" for="city1">City</label>--%>
                                                                            <%--<select class="form-control" name="city" id="city1"></select>--%>
                                                                        <%--</div>--%>
                                                                        <%--<div class="form-group">--%>
                                                                            <%--<label class="sr-only" for="district1">District</label>--%>
                                                                            <%--<select class="form-control" name="district" id="district1"></select>--%>
                                                                        <%--</div>--%>
                                                                    <%--</div>--%>
                                                            <%--</div>--%>
                                                        <%--</div>--%>

                                                        <%--<div class='form-group' style="margin-left: 100px">--%>
                                                            <%--<div class='col-md-offset-2 col-md-5'style='padding-left:100px'>--%>
                                                                <%--<button type='submit' class='btn btn-default'>确认修改</button>--%>
                                                                <%--&lt;%&ndash;<button type='button'  class='btn btn-default' id="up">确认修改</button>&ndash;%&gt;--%>
                                                            <%--</div>--%>
                                                        <%--</div>--%>
                                                        <%--<br><br><br><br>--%>
                                                    <%--</form>--%>
                                                <%--</div>--%>
                                            <%--</div>--%>
                                        <%--</div>--%>
                                    <%--</div>--%>
                                <%--</div>--%>
                                <%--</p>--%>
                                <%--<p style="text-align: left;color:red;font-size: 20px;">--%>
                                    <%--¥${g.price}</p>--%>
                            <%--</div>--%>
                        <%--</div>--%>
                                <%--<!-- //弹出服务详情 -->--%>
                                <%--<script>$('[func=btnDescription${g.id}]').click(function () {--%>
                                    <%--var modalInfo = $('#myModal2${g.id}');--%>
                                    <%--modalInfo.modal();})--%>
                                <%--</script>--%>
                            <%--</c:if>--%>
                        <%--</c:forEach>--%>
                        <%--&lt;%&ndash;分页&ndash;%&gt;--%>
                        <%--<div class="container" style="margin-left: 80px;width: 800px;">--%>
                            <%--<ul class="pagination"  style="margin-left: 170px">--%>
                                <%--<li><a href="javascript:goPage(1)">首页</a></li>--%>

                                <%--&lt;%&ndash;上一页&ndash;%&gt;--%>
                                <%--<c:if test="${pageInfo.pageNum>1}">--%>
                                    <%--<li><a href="javascript:goPage(${pageInfo.pageNum-1})">&laquo;</a></li>--%>
                                <%--</c:if>--%>
                                <%--<c:if test="${pageInfo.pageNum<=1}">--%>
                                    <%--<li class="disabled"><a>&laquo;</a></li>--%>
                                <%--</c:if>--%>

                                <%--<!--循环标签显示 - 显示5个--%>
                                    <%--思路 - 起始值 - 从当前页--%>
                                <%---->--%>
                                <%--&lt;%&ndash;处理一下最终的页数&ndash;%&gt;--%>
                                <%--<c:if test="${pageInfo.pages>=3}">--%>
                                    <%--<c:set var="k" value="2"></c:set>--%>
                                <%--</c:if>--%>
                                <%--<c:if test="${pageInfo.pages<3}">--%>
                                    <%--<c:set var="k" value="${pageInfo.pages-1}"></c:set>--%>
                                <%--</c:if>--%>

                                <%--<c:if test="${pageInfo.pageNum+k<pageInfo.pages}">--%>
                                    <%--<c:set var="startPage" value="${pageInfo.pageNum}"></c:set>--%>
                                <%--</c:if>--%>

                                <%--<c:if test="${pageInfo.pageNum+k>=pageInfo.pages}">--%>
                                    <%--<c:set var="startPage" value="${pageInfo.pages-k}"></c:set>--%>
                                <%--</c:if>--%>

                                <%--<c:forEach begin="${startPage}" end="${startPage+k}" var="n">--%>
                                    <%--&lt;%&ndash;判断当前页是否高亮显示&ndash;%&gt;--%>
                                    <%--<li <c:if test="${pageInfo.pageNum == n}">class='active'</c:if>> <a href="javascript:goPage(${n})">${n}</a></li>--%>
                                <%--</c:forEach>--%>


                                <%--&lt;%&ndash;下一页&ndash;%&gt;--%>
                                <%--<c:if test="${pageInfo.pageNum<pageInfo.pages}">--%>
                                    <%--<li><a href="javascript:goPage(${pageInfo.pageNum+1})">&raquo;</a></li>--%>
                                <%--</c:if>--%>
                                <%--<c:if test="${pageInfo.pageNum>=pageInfo.pages}">--%>
                                    <%--<li class="disabled"><a>&raquo;</a></li>--%>
                                <%--</c:if>--%>

                                <%--<li><a href="javascript:goPage(${pageInfo.pages})">尾页</a></li>--%>
                                <%--<li><a href="#">当前页${pageInfo.pageNum}/${pageInfo.pages}总页</a></li>--%>
                            <%--</ul>--%>
                        <%--</div>--%>
                        <%--<script>--%>
                            <%--//    下一页--%>
                            <%--function goPage(pageNum){--%>
                                <%--//获取文本框的内容--%>
                                <%--var name = document.getElementById("searchName").value;--%>
                                <%--//继续发送类型的数据--%>
<%--//                        var type_id = document.getElementById("").value;--%>
                                <%--var goodstypeid=1;--%>
                                <%--//发送到后台--%>
                                <%--window.location='${path}/goods/list?name='+name+"&goodstypeid="+goodstypeid+"&pageNum="+pageNum;--%>
                                <%--//通过ajax的方式进行跳转.--%>
                                <%--//原生的js操作ajax--%>
                                <%--//原生的jquery$.ajax--%>
                                <%--//jquery高级的用法$.get和$.post--%>
                                <%--&lt;%&ndash;$("#content").load("${path}/phone/list.action",{name:name,phonetype_id:null,pageNum:pageNum,pageSize:pageSize});&ndash;%&gt;--%>
                            <%--}--%>
                        <%--</script>--%>
                    </dl>

                    <!--玩具-->
                    <dl id="pet_family" class="pet_none">

                        <%--<c:forEach items="${requestScope.goodsList}" var="g">--%>
                            <%--<c:if test="${g.goodsTypeId==2&&g.status==0}">--%>
                        <%--<div>--%>
                            <%--<img src="${g.goodsPicture}" alt="history" style="float:left" />--%>
                            <%--<div style="float:left">--%>
                                <%--<a href="itemsinfo.jsp">--%>
                                    <%--<h5 style="font-weight:bold">${g.goodsName}</h5>--%>
                                    <%--<div>--%>
                                        <%--<p style="font-weight:bold">${g.goodsDetails}</p>--%>
                                    <%--</div>--%>
                                    <%--<p style="text-align: left;color:red;font-size: 20px">¥${g.price}</p>--%>
                                <%--</a>--%>
                            <%--</div>--%>
                        <%--</div>--%>
                            <%--</c:if>--%>
                        <%--</c:forEach>--%>
                        </dl>
                    <!--服饰-->
                    <dl id="pet_culture" class="pet_none">
                        <%--<c:forEach items="${requestScope.goodsList}" var="g">--%>
                        <%--<c:if test="${g.goodsTypeId==3&&g.status==0}">--%>
                        <%--<div>--%>
                            <%--<img src="${g.goodsPicture}" alt="history" style="float:left" />--%>
                            <%--<div style="float:left">--%>
                                <%--<a href="itemsinfo.jsp">--%>
                                    <%--<h5 style="font-weight:bold">${g.goodsName}</h5>--%>
                                    <%--<div>--%>
                                        <%--<p style="font-weight:bold">${g.goodsDetails}</p>--%>
                                    <%--</div>--%>
                                    <%--<p style="text-align: left;color:red;font-size: 20px">¥${g.price}</p>--%>
                                <%--</a>--%>
                            <%--</div>--%>
                        <%--</div>--%>
                        <%--</c:if>--%>
                        <%--</c:forEach>--%>
                    </dl>

                    <!--其他-->
                    <dl id="pet_novel" class="pet_none">
                        <%--<c:forEach items="${requestScope.goodsList}" var="g">--%>
                        <%--<c:if test="${g.goodsTypeId==4&&g.status==0}">--%>
                                <%--<div>--%>
                                    <%--<img src="${g.goodsPicture}" alt="history" style="float:left" />--%>
                                    <%--<div style="float:left">--%>
                                        <%--<a href="itemsinfo.jsp">--%>
                                            <%--<h5 style="font-weight:bold">${g.goodsName}</h5>--%>
                                            <%--<div>--%>
                                                <%--<p style="font-weight:bold">${g.goodsDetails}</p>--%>
                                            <%--</div>--%>
                                            <%--<p style="text-align: left;color:red;font-size: 20px">¥${g.price}</p>--%>
                                        <%--</a>--%>
                                    <%--</div>--%>
                                <%--</div>--%>
                        <%--</c:if>--%>
                        <%--</c:forEach>--%>
                    </dl>
                </div>

                </div>
            <div >
                    <img src="http://pz9i3bxwr.bkt.clouddn.com//11.png" style="width: 60px;height:60px;position:relative;right:-50px;top:10px;opacity: 0.5;"/>
                    <img src="http://pz9i3bxwr.bkt.clouddn.com//11.png" style="width: 60px;height:60px;position:relative;right:-150px;top:-10px;opacity: 0.5;"/>
                    <img src="http://pz9i3bxwr.bkt.clouddn.com//11.png" style="width: 60px;height:60px;position:relative;right:-250px;top:10px;opacity: 0.5;"/>
                    <img src="http://pz9i3bxwr.bkt.clouddn.com//11.png" style="width: 60px;height:60px;position:relative;right:-350px;top:-10px;opacity: 0.5;"/>
                    <img src="http://pz9i3bxwr.bkt.clouddn.com//11.png" style="width: 60px;height:60px;position:relative;right:-450px;top:10px;opacity: 0.5;"/>
                    <img src="http://pz9i3bxwr.bkt.clouddn.com//11.png" style="width: 60px;height:60px;position:relative;right:-550px;top:-10px;opacity: 0.5;"/>
                </div>


            <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModa88"
                    style="position:relative;top: -530px;left: 800px;background-color: #c24f4a">
                消息盒子
            </button>

            <!-- 模态框（Modal） -->
            <div class="modal fade" id="myModa88" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content" style="width: 260px;border: #e4393c">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="color: #e4393c">
                                &times;
                            </button>
                            <h4 class="modal-title" id="myModalLabel">
                                买家客户: <span style="color: #a94442">${user1.userName}</span>
                            </h4>
                        </div>
                        <div class="modal-body">
                            <div id="console"></div>
                            <c:if test="${empty user.id}">
                                <h2 style="margin-left: 30px;color: red">请先登录!!!</h2>
                            </c:if>
                            <c:if test="${!empty user.id}">
                            <input type="text" placeholder="请输入内容" id="chat" />
                            </c:if>
                        </div>

                        <script type="text/javascript">
                                var Console = {};
                            var mess={};
                            var userList=[];

                            //            var senderId=prompt("请输入你的账号");
                            var senderId=${user.id};//当前用户id

                            Console.log = (function(message) {
                                var console = document.getElementById('console');
                                var p = document.createElement('p');
                                p.style.wordWrap = 'break-word';
                                p.innerHTML = message;
                                console.appendChild(p);
                                while (console.childNodes.length > 25) {
                                    console.removeChild(console.firstChild);
                                }
                                console.scrollTop = console.scrollHeight;
                            });
                            var Chat = {};
                            Chat.socket = null;
                            Chat.connect = (function(host) {
                                if ('WebSocket' in window) {
                                    Chat.socket = new WebSocket(host);
                                } else if ('MozWebSocket' in window) {
                                    Chat.socket = new MozWebSocket(host);
                                } else {
                                    Console.log('错误');
                                    return;
                                }

                                Chat.socket.onopen = function() {
                                    Console.log('<span style="color: #e4393c;margin-left: 30px">信息通畅,请放心交流</span>');
                                    document.getElementById('chat').onkeydown = function(event) {
                                        if (event.keyCode == 13) {
                                            Chat.sendMessage();
                                        }
                                    };
                                };

                                Chat.socket.onclose = function() {
                                    document.getElementById('chat').onkeydown = null;
                                    Console.log('<span style="color: red;margin-left: 30px">信号中断,对话停止</span>');
                                };

                                Chat.socket.onmessage = function(message) {
                                    Console.log(message.data);
                                };
                            });

                            Chat.initialize = function() {
                                Chat.connect('ws://localhost:8081/PetForums/webSocket/'+senderId);
                            };

                            Chat.sendMessage = (function() {
                                var str="";
                                str+="<img src='${info.picfilename}' width='40px' heigth='40px'/>&nbsp;&nbsp;";
                                var message = str+document.getElementById('chat').value;

//                var receiverIds=prompt("请输入接收者账号用逗号分隔");
                                <%--<%--%>
                                <%--String buyid = (String) session.getAttribute("buyid");--%>
                                <%--%>--%>

                                var receiverIds=${buyid}+",";

//                if(receiverIds!=null){
//
//                    HttpSession session=request.getSession();
//                    session.setAttribute("username",session);
//                }
                                userList=receiverIds.split(",");

                                mess.userList=userList;

                                mess.mess=message;

                                var strmee=JSON.stringify(mess);

                                if (message != '') {
                                    //发送
                                    Chat.socket.send(strmee);
                                    //清空输入框
                                    document.getElementById('chat').value='';

                                }
                            });

                            Chat.initialize();
                        </script>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>


            <!--mini聊天窗口开始-->
            <%--<div class="small-chat-box fadeInRight animated" style="top: 100px">--%>

                <%--<div class="heading" draggable="true">--%>
                    <%--<small class="chat-date pull-right">--%>
                    <%--</small>客户 消息--%>
                <%--</div>--%>

                <%--<div class="content">--%>
                    <%--<div id="console">--%>
                    <%--</div>--%>

                <%--</div>--%>
                <%--<div class="form-chat">--%>
                    <%--<div class="input-group input-group-sm" >--%>
                        <%--&lt;%&ndash;<input type="text" class="form-control1" >&ndash;%&gt;--%>
                        <%--&lt;%&ndash;<input type="text" placeholder="请输入内容" id="chat" />&ndash;%&gt;--%>
                        <%--&lt;%&ndash;<span class="input-group-btn" style="margin-top: -15px;">&ndash;%&gt;--%>
                        <%--&lt;%&ndash;<button class="btn btn-primary"&ndash;%&gt;--%>
                                <%--&lt;%&ndash;type="button" style="background: black">发送&ndash;%&gt;--%>
                        <%--&lt;%&ndash;</button> </span>&ndash;%&gt;--%>
                    <%--</div>--%>
                <%--</div>--%>
                <%----%>

            <%--</div>--%>

            <!--mini聊天窗口结束-->
            <!--精品内容-->
            <div class="pet_sort" style="margin-top: 20px">
                <div class="pet_new">
                    <div class="pet_left">
                        <h3 style="margin: 0px;color: #F99B46;font-weight:bold">精品内容</h3>
                    </div>
                </div>
                <div class="pet_class" style="height:380px;padding-top: 30px">
                    <dl id="pet_focus" class="flow-default">

                        <%--流加载--%>
                    </dl>
                </div>
            </div>
        </div>
        <!--中间部分结束-->

    <!-- 底部文字返回顶部 start-->
	<div id="shangxia2">
            <span id="gotop1">
                <img src="${path}/css/trading/homepage/huojian.svg" alt="返回顶部小火箭">
            </span>
        </div>


    <script>
            $(function() {
            
            // 弹跳球式滚动底部 .box2是要滚动地方的id或者锚点
            $("#gotop5").click(function() {
            TweenMax.to(window, 2, {scrollTo:".box2", ease:Bounce.easeOut});
             });
            
            
            // 返回顶部，绑定gotop1图标和gotop2文字事件
            $("#gotop1,#gotop2").click(function(e) {
               TweenMax.to(window, 1.5, {scrollTo:0, ease: Expo.easeInOut});
               var huojian = new TimelineLite();
                huojian.to("#gotop1", 1, {rotationY:720, scale:0.6, y:"+=40", ease:  Power4.easeOut})
                .to("#gotop1", 1, {y:-1000, opacity:0, ease:  Power4.easeOut}, 0.6)
                .to("#gotop1", 1, {y:0, rotationY:0, opacity:1, scale:1, ease: Expo.easeOut, clearProps: "all"}, "1.4");
             });            
            
            // 以1.5秒快慢快的速度滚动顶部
            $("#gotop4").click(function() {
            TweenMax.to(window, 1.5, {scrollTo:0, ease:SlowMo.ease.config(0.7, 0.7, false)});
             });
            
            
            });
            
            </script>

        <%--目的:为了让外部的js文件使用灵活的项目的上下文路径--%>
        <input type="hidden" value="${path}" id="path">
        <script src="${path}/js/trading/homepage/goods.js"></script>
    <script src="${path}/js/trading/homepage/jquery.min.js"></script>
    <script src="${path}/js/trading/homepage/TweenMax.min.js"></script>
    <script src="${path}/js/trading/homepage/ScrollToPlugin.min.js"></script>
 <!-- 底部文字返回顶部end -->   
        
        <!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
        <script src="${path}/plugins/jquery/jquery.min.js"></script>
        <!--引入bootstrap的js文件-->
        <script src="${path}/plugins/bootstrap/js/bootstrap.js"></script>
        <script src="${path}/plugins/bootstrap-date/js/distpicker.data.js"></script>
        <script src="${path}/plugins/bootstrap-date/js/distpicker.js"></script>
        <script src="${path}/plugins/bootstrap-date/js/main.js"></script>
        <script src="${path}/plugins/layui-v2.5.5/layui/layui.js" charset="utf-8"></script>

        <%--食物异步分页--%>
        <script>
            $(function(){
                $("#pet_history").load("${path}/goods/list");
            });
        </script>
        <%--玩具异步分页--%>
        <script>
            $(function(){
                $("#pet_family").load("${path}/goods/list2");
            });
        </script>
        <%--服饰异步分页--%>
        <script>
            $(function(){
                $("#pet_culture").load("${path}/goods/list3");
            });
        </script>
        <%--其他异步分页--%>
        <script>
            $(function(){
                $("#pet_novel").load("${path}/goods/list4");
            });
        </script>

        <script>
            $(document).ready(function () {
                $("#search").focus(function () {
                    $(this).css("padding-right", "180.5px")
                });
                $("#search").blur(function () {
                    $(this).css("padding-right", "42.5px")
                });
            });

            layui.use('flow', function() {
                var flow = layui.flow;

                flow.load({
                    elem: '#pet_focus' //流加载容器
                    , done: function (page, next) { //执行下一页的回调
                        var lis = [];
                        $.post(
                            "${path}/goods/list1",
                            function (data) {
                                for (var i=(page-1)*4;i<=(page*4-1);i++){
                                    if(i<data.length){
                                        str="";
                                        str+="<div>";
                                        if(data[i].status==0){
                                        if (${sessionScope.user.powers==1}){
                                        str+="<input type='checkbox' value='"+data[i].id+"' name='cks' style='float:left'>";
                                        }
                                        str+="<img src='"+data[i].goodsPicture+"' alt='history' style='float:left' />";
                                        str+="<div style='float:left'>";
                                        str+="<a href='itemsinfo.jsp'>";
                                        str+="<h5 style='font-weight:bold'>"+data[i].goodsName+"</h5>";
                                        str+="<div>";
                                        str+="<p style='font-weight:bold'>"+data[i].goodsDetails+"</p>";
                                        str+="</div>";
                                        str+="<p style='text-align: left;color:red;font-size: 20px'>¥"+data[i].price+"</p>";
                                        str+="</a></div>";
                                        }
                                        str+="</div>";
                                        $("#pet_focus>div:last-child").before(str);
                                        $("#pet_focus>div:last-child").css('margin-left','25%');
                                    }
                                }
                                var count=((data.length)/4+1);
                                next(lis.join(''), page <=count);
                            }

                        );

                        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                        //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                        //假设总页数为 10
                    }
                })
                });

        </script>


</div>
</body>

</html>